<template>
  <div style="background: #F8FAFD;">
    <v-layout wrap row pt-5 px-5 mb-5>
      <v-flex xs12 px-5>
        <v-layout align-center justify-start row fill-height>
          <div
            class="mr-5"
            style="border-radius: 50%; background: #54BEB6; width: 56px; height: 56px; text-align: center; line-height: 56px;"
          >
            <font class="iconfont icon-zhuchangguanli" style="color: #ffffff; font-size: 40px;"></font>
          </div>
          <div>
            <span style="font-size: 20px; color: #333333; font-weight: bold;">猪耳标实时数据</span>
          </div>
        </v-layout>
      </v-flex>
      <v-flex xs12 sm4 md3 v-for="item in pigTagData" :key="item.pigTagData" px-5 py-2>
        <v-layout wrap row>
          <v-flex xs12>
            <v-hover v-slot:default="{ hover }">
              <v-card :elevation="hover ? 12 : 2" class="mx-auto">
                <v-card-title
                  style="border-bottom: 1px solid #E9E9E9; padding-top: 5px; padding-bottom: 5px;"
                >
                  <v-layout align-center justify-space-between row fill-height>
                    <v-flex xs6 text-left pl-2>
                      <span style="font-size: 16px; color: #333333; font-weight: bold;">猪耳标名称</span>
                    </v-flex>
                    <v-flex xs6 text-right>
                      <v-btn
                        text
                        color="#71af65"
                        :to="{path: '/MainPage', query:{earTag: item}}"
                      >历史数据 >>&nbsp;</v-btn>
                    </v-flex>
                  </v-layout>
                </v-card-title>
                <v-card-text>
                  <v-layout wrap row pb-1>
                    <v-flex xs12 text-center my-3>
                      <img src="../assets/pig.png" style="width: 56px; height: 56px;" />
                    </v-flex>

                    <v-flex xs12 text-center>
                      <span
                        style="color: #666666; font-size: 26px; font-weight: bold"
                      >{{item.tagMac}}</span>
                    </v-flex>

                    <v-flex xs12 text-center my-2>
                      <span
                        style="color: #333333; font-size: 12px;"
                      >{{ item.t !== "" ? moment(item.t).format("YYYY-MM-DD HH: mm :ss") : "--" }}</span>
                    </v-flex>

                    <v-flex xs12 py-3 px-5>
                      <v-layout row wrap style="border-radius: 15px; background: #F7F7F7" px-5 py-2>
                        <v-flex xs6 pl-2 my-1>
                          <span style="color: #666666; font-size: 12px;">步数:&nbsp;</span>
                          <span
                            style="color: #333333; font-size: 12px;"
                          >{{ item.stepCount || "--" }}</span>
                        </v-flex>
                        <v-flex xs6 pl-2 my-1>
                          <span style="color: #666666; font-size: 12px;">电压:&nbsp;</span>
                          <span style="color: #333333; font-size: 12px;">{{ item.vol || "--" }}</span>
                        </v-flex>
                        <v-flex xs6 pl-2 my-1>
                          <span style="color: #666666; font-size: 12px;">目标温度:&nbsp;</span>
                          <span
                            style="color: #333333; font-size: 12px;"
                          >{{ item.targetTemp || "--" }}</span>
                        </v-flex>
                        <v-flex xs6 pl-2 my-1>
                          <span style="color: #666666; font-size: 12px;">环境温度:&nbsp;</span>
                          <span style="color: #333333; font-size: 12px;">{{ item.envTemp || "--" }}</span>
                        </v-flex>
                      </v-layout>
                    </v-flex>
                  </v-layout>

                  <!-- <div>
                    <span style="color: #999999; font-size: 14px;">时间:&nbsp;</span>
                    <span
                      style="color: #666666; font-size: 14px;"
                    >{{ item.t !== "" ? moment(item.t).format("YYYY-MM-DD HH:mm:ss") : "" }}</span>
                  </div>
                  <div>
                    <span style="color: #999999; font-size: 14px;">标签MAC:&nbsp;</span>
                    <span style="color: #666666; font-size: 14px;">{{item.tagMac}}</span>
                  </div>
                  <div>
                    <span style="color: #999999; font-size: 14px;">步数:&nbsp;</span>
                    <span style="color: #666666; font-size: 14px;">{{item.stepCount}}</span>
                  </div>
                  <div>
                    <span style="color: #999999; font-size: 14px;">电压:&nbsp;</span>
                    <span style="color: #666666; font-size: 14px;">{{item.vol}}</span>
                  </div>
                  <div>
                    <span style="color: #999999; font-size: 14px;">目标温度:&nbsp;</span>
                    <span style="color: #666666; font-size: 14px;">{{item.targetTemp}}</span>
                  </div>
                  <div>
                    <span style="color: #999999; font-size: 14px;">环境温度:&nbsp;</span>
                    <span style="color: #666666; font-size: 14px;">{{item.envTemp}}</span>
                  </div>-->
                </v-card-text>
                <!-- <v-card-actions>
                  <v-btn
                    text
                    color="#71af65"
                    :to="{path: '/MainPage', query:{earTag: item}}"
                  >查看耳标历史数据</v-btn>
                </v-card-actions>-->
              </v-card>
            </v-hover>
          </v-flex>
        </v-layout>
      </v-flex>
    </v-layout>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");
export default {
  data: () => ({
    tagMac: "",
    pigTagData: [],
    moment: moment,
    queryId: ""
  }),

  created() {
    if (this.mqttConnStat === 1) {
      this.selectRealData();
    } else if (this.mqttConnStat === 2) {
      //表明正在连接，显示loading
    } else if (this.mqttConnStat === 0) {
      //表明没有连接，进行连接
      this.$store.dispatch("connectMqttClient");
    } else {
      //不可能的状态
    }
  },

  computed: {
    mqttConnStat() {
      return this.$store.getters.mqttConnStat;
    },
    mqttClient() {
      return this.$store.state.mqttClient;
    },
    mqttMessage() {
      return this.$store.state.mqttMessage;
    },
    mqttBaseTopic() {
      return this.$store.state.mqttBaseTopic;
    }
  },

  watch: {
    mqttConnStat(newVal, oldVal) {
      if (newVal === 1 && oldVal === 2) {
        this.selectRealData();
      }
    },

    mqttMessage() {
      let data = JSON.parse(this.mqttMessage);
      if (data.confTyp === "TAG" && data.method === "TAG_INFO") {
        if (
          data.status === "success" &&
          data.para.length > 0 &&
          this.pigTagData.length === 0
        ) {
          this.pigTagData = [];
          data.para.forEach(item => {
            this.pigTagData.push({
              tagMac: item.tagMac,
              envTemp: "",
              stepCount: "",
              t: "",
              targetTemp: "",
              vol: ""
            });
            this.selectEveryTagLastData(item);
          });
        }
      }

      //页面初始化加载数据
      if (
        this.pigTagData.length > 0 &&
        this.mqttBaseTopic ===
          "b5e1726951d82efb3ab70a18e0de4d6b9a760aaed0c70a57895a758aa50279cf/AnimalTag/historyData" &&
        data.tagMac === data.qryId
      ) {
        this.pigTagData.forEach(item => {
          if (item.tagMac === data.tagMac) {
            item.envTemp = data.data.envTemp[0];
            item.stepCount = data.data.stepCount[0];
            item.t = data.data.t[0];
            item.targetTemp = data.data.targetTemp[0];
            item.vol = data.data.vol[0];
          }
        });
      }

      // if (
      //   this.pigTagData.length > 0 &&
      //   data.confTyp === "TAG" &&
      //   data.method === "QUERY_LASTDATA" &&
      //   data.status === "success"
      // ) {
      //   console.log("what: ", data);
      //   this.pigTagData.forEach(item => {
      //     if (item.tagMac === data.tagMac) {
      //       item.envTemp = data.para[0].envTemp;
      //       item.stepCount = data.para[0].stepCount;
      //       item.t = data.para[0].t;
      //       // item.t = data.updt;
      //       item.targetTemp = data.para[0].targetTemp;
      //       item.vol = data.para[0].vol;
      //     }
      //   });
      //   console.log("=========>: ", this.pigTagData);
      // }

      if (
        data.tagMac !== undefined &&
        this.mqttBaseTopic ===
          "b5e1726951d82efb3ab70a18e0de4d6b9a760aaed0c70a57895a758aa50279cf/AnimalTag/data"
      ) {
        // this.tagMac = data.tagMac;
        let _this = this;
        // console.log("real time: ", data);
        this.pigTagData.forEach(item => {
          if (item.tagMac === data.tagMac) {
            item.envTemp = data.data.envTemp;
            item.stepCount = data.data.stepCount;
            item.t = data.data.t;
            item.targetTemp = data.data.targetTemp;
            item.vol = data.data.vol;
          }
        });
      }
    }
  },

  methods: {
    selectRealData() {
      let _this = this;
      let animalVersionData = JSON.stringify({
        confTyp: "TAG",
        method: "TAG_INFO",
        para: {
          tagMac: "ALL"
        }
      });
      this.$store.commit("PUBLISH_VERSION", animalVersionData);
    },

    // 查询每一个耳标的最后一条历史数据
    selectEveryTagLastData(item) {
      // this.queryId = itemT + "_" + Date.now() + "_" + performance.now();
      let animalData = JSON.stringify({
        tagMac: item.tagMac,
        updt: Date.now(),
        downdt: Date.now() - 60 * 60 * 1000,
        limit: 1, // 要取的条数
        offset: 0, // 起始条目
        qryId: item.tagMac
      });
      // let animalData = JSON.stringify({
      //   confTyp: "TAG",
      //   method: "QUERY_LASTDATA",
      //   para: { tagMac: item.tagMac }
      // });
      this.$store.commit("PUBLISHMSG", animalData);
    }
  }
};
</script>